<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div class="clearfix">
          <table class="no-border" style="display:inline">
            <tr permission='smsTemplate_btn_listData' style="display:none">
              <td style="padding: 0px 6px;">
                模板编号
              </td>
              <td>
                <div class="input-group">
                  <input type="text" id="key_template_code" class="form-control search-query hidden-480" placeholder="模板编号" style="width:140px"/>
                </div>
              </td>
              <td class="hidden-480" style="padding: 0px 6px;">
                状态
              </td>
              <td>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" style="margin-left:0.01em;width:99px;min-width:99px;">
                      <span id="searchDropdowndisplay">全部</span>
                      <i class="ace-icon fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu col-sm-12" style="margin-left:-1px;width:99px;min-width:90px;">
                      <li>
                        <a href="javascript:winFn.dropdown('#key_enabled','','#searchDropdowndisplay','全部');">全部</a>
                      </li>
                      <li>
                        <a href="javascript:winFn.dropdown('#key_enabled','0','#searchDropdowndisplay','禁用');">禁用</a>
                      </li>
                      <li>
                        <a href="javascript:winFn.dropdown('#key_enabled','1','#searchDropdowndisplay','启用');">启用</a>
                      </li>
                    </ul>
                    <input id="key_enabled" type="hidden"/>
                  </span>
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnSearch" permission='smsTemplate_btn_listData' style="display:none">
                      <span class="ace-icon fa fa-search bigger-110"></span>
                      搜索
                    </button>
                  </span>
                </div>
              </td>
              <td>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnAdd" permission='smsTemplate_btn_add' style="display:none">
                      <span class="ace-icon glyphicon glyphicon-plus bigger-110"></span>
                      添加
                    </button>
                  </span>
                </div>
              </td>
              <td>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnDel" permission='smsTemplate_btn_delByKeys' style="display:none">
                      <span class="fa fa-trash red2 bigger-110"></span>
                      删除
                    </button>
                  </span>
                </div>
              </td>
            </tr>
          </table>
          <div class="hidden-480 pull-right tableTools-container" permission='smsTemplate_btn_listData' style="display:none"></div>
        </div>
        <table id="tableListSmsTemplate" class="table table-striped table-bordered table-hover"></table>
      </div>
    </div>
  </div>
</div>
<div id="div_sms_template_edit" style="display:none">
  <form class="form-horizontal" id="form_sms_template_edit" role="form">
    <label class="col-sm-3 control-label no-padding-right" for="template_code"><div class="hr-4"></div>模板编号</label>
    <div class="col-sm-7">
      <div class="hr-4"></div>
    <input type="text" id="template_code" placeholder="阿里云短信的模板编号" class="form-control" maxlength="128"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right" for="template_name"><div class="hr-4"></div>模版名称</label>
    <div class="col-sm-7">
      <div class="hr-4"></div>
    <input type="text" id="template_name" placeholder="阿里云短信的模版名称" class="form-control" maxlength="128"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right" for="phone_variate"><div class="hr-4"></div>变量名</label>
    <div class="col-sm-7">
      <div class="hr-4"></div>
    <input type="text" id="phone_variate" placeholder="接收号码的变量名,默认phone" class="form-control" maxlength="64"/>
    </div>
  </form>
</div>
<div id="divKeyColumns" style="display:none;padding:1px 0px;"></div>
<input type="hidden" id="sms_template_edit_keyId"/>
<div style="display:none;">
  <input type="hidden" id="smsTemplate_btn_listData"/>
  <input type="hidden" id="smsTemplate_btn_add"/>
  <input type="hidden" id="smsTemplate_row_edit"/>
  <input type="hidden" id="smsTemplate_row_queryById"/>
  <input type="hidden" id="smsTemplate_row_delById"/>
  <input type="hidden" id="smsTemplate_btn_delByKeys"/>
</div>
<script type="text/javascript">
  var scripts = [null, null];
  $('.page-content-area').ace_ajax('loadScripts', scripts, function(){
    var tableDom = '#tableListSmsTemplate';
    var inputEditKeyId = '#sms_template_edit_keyId';
    $(function(){
      var urlRoute = '/smsTemplate/';/*请求controller层的url*/
      var getList = urlRoute + 'listData';/*获取数据列表*/
      var urlAdd = urlRoute + 'add';/*添加*/
      var urlEdit = urlRoute + 'edit';/*编辑*/
      var urlEditDisplay = urlRoute + 'editDisplay';/*是否显示*/
      var urlQueryById = urlRoute + 'queryById';/*根据id查询对应的数据*/
      var urlDelById = urlRoute + 'delById';/*根据id删除对应的数据*/
      var urlDelByKeys = urlRoute + 'delByKeys';/*批量删除*/
      var thisTable = pageDataTable.initDataTable({
        tableDom : tableDom,
        sAjaxSource : getList,
        fnServerParams : function(params){
          params.push({"name": "template_code", "value": $("#key_template_code").val()},{"name": "enabled", "value": $("#key_enabled").val()});
        },
        aoColumns : [
          {
            bSortable : false,
              mData : "kid",
              sWidth : "38px",
              sClass : "center",
              visible : true,/*若不用到时设为false即可,请勿删除否则有bug*/
              sTitle : '<label title="全选|不选"><input type="checkbox" class="ace" /><span class="lbl"></span></label>'
          },
          {
            mData : "template_code",
            sTitle : "模板编号"
          },
          {
            mData : "template_name",
            sTitle : "模版名称"
          },
          {
            mData : "phone_variate",
            sTitle : "手机号变量"
          },
          {
            mData : "enabled",
            sTitle : "当前状态",
            sWidth: "25%",
            render : function(value,type,row,meta){
              if(value === 1){
                return '启用';
              }else if(value === 0){
                return '禁用';
              }else{
                return "";
              }
            }
          },
          {
            mData : "_kid_",
            sTitle : "<label style='color:#000;margin-left:6px;' title='单行操作'>操作选项</label>",
            bSortable : false,
            visible : true,/*若不用到时设为false即可,请勿删除否则有bug*/
            sWidth: "15%"
          }
        ],
        columnDefs : [
          {
            targets : 0,//指定的列
            render : function(value, type, row, meta){
              return '<label title="选择|取消"><input type="checkbox" name="kid" value="' + value + '" style="cursor:pointer;text-decoration:none;outline:none;"/><span class="lbl"></span></label>';
            }
          },
          {
            targets : -1,
              render : function(value, type, row, meta){
              return "<a href='javascript:thisPage.rowEdit(" + meta.row + ");' style='outline:none;text-decoration: none;color:#3b8cff;margin-left:6px;display:none' permission='smsTemplate_row_edit'>编辑</a>" + "<a href='javascript:thisPage.rowDisable(" + meta.row + ");' style='outline:none;text-decoration: none;color:#3b8cff;margin-left:6px;display:none' permission='smsTemplate_row_editDisplay'>"+(row.enabled === 1 ? "禁用" : "启用")+"</a>" + "<a class='hidden-xs' href='javascript:thisPage.rowDel(" + meta.row + ");' style='outline:none;text-decoration: none;color:#f00;margin-left:6px;display:none' permission='smsTemplate_row_delById'>删除</a>";
            }
          },
          {
            targets : [1,2],
              render : function(value, type, row, meta){
              return pageDataTable.formatColumn(value);
            }
          },
          {
          visible : false,//列的隐藏显示
          targets : []//指定列
          }
        ]
      });
      pageDataTable.buttons(thisTable);
      pageDataTable.action(thisTable);
      pageDataTable.select(thisTable, tableDom);
      pageDataTable.tooltip();
      var thisJquery = $(tableDom).dataTable();
      thisPage = {
        init: function(){
          this.addEvent();
        },
        initDom: function(){
        },
        createDropdown: function(){
        },
        addEvent: function(){
          this.btnEvent();
        },
        btnEvent: function(){
          $(tableDom + ' tbody').on('dblclick','tr', function(){
            if(verifyFn.inputRequired('#smsTemplate_row_edit')){
              return;
            }
            thisPage.trDblclick(thisTable.row(this).data());
          });
          $('#btnAdd').on('click', function(){
            thisPage.edit();
          });
          //搜索按钮
          $('#btnSearch').on('click', function(){
            thisPage.search();
          });
          //按钮组-自定义显示列
          $('#iconColumn').parent().parent().on('click', function(){
            pageDataTable.columnCustom(thisTable, tableDom,'#divKeyColumns');
          });
          //按钮组-搜索
          $('#iconRefresh').parent().parent().on('click', function(){
            thisPage.search();
          });
          $('#btnDel').on('click', function(){
            thisPage.delKeys();
          });
        }, /*批量删除*/
        delKeys: function(){
          if(verifyFn.inputCheck('#smsTemplate_btn_delByKeys','没有删除操作权限')) return;
          var kids = '';
          var index = 0;
          $(tableDom + ' tbody input:checked').each(function(){
            index++;
            var value = this.value;
            if(value != null && value != ''){
              if(kids.length > 0) kids += ",";
              kids += value;
            }
          });
          if(index == 0){
            layerFn.alert('请选择要删除的数据!', AppKey.code.code199);
            return;
          }
          layerFn.confirm('将要删除[' + index + ']条数据且是无法恢复,确定要继续吗?', function(){
            layerFn.delBatchHint(urlDelByKeys, kids, function(data){
              thisPage.complete(data, null, true);
            });
          });
        },
        trDblclick: function(data){
          thisPage.edit(data.kid);
        },
        search: function(){
          if(verifyFn.inputCheck('#smsTemplate_btn_listData','没有操作权限')) return;
          $(tableDom + '_wrapper table input[type=checkbox]').prop('checked', false);
          thisTable.draw();
        },
        rowDisable: function(index){
          var row = thisJquery.fnGetData(index);
          var enabled = row.enabled;
          var msg = '启用';
          var status = 1;
          if(enabled == 1){
            msg = '禁用';
            status = 0;
          }
          layerFn.confirm('你确定要['+msg+'\'编号'+row.template_code+'\']</span>的内容操作吗?',function(){
            layerFn.submit(urlEditDisplay,{kid:row.kid,enabled:status},function(data){
              thisPage.complete(data,null,true);
            });
          });
        },
        resetForm: function(){
          winFn.clearFormData('#form_sms_template_edit');
        },
        edit: function(kid){
          var title = '添加';
          if(kid != null && kid.length > 0){
            if(verifyFn.inputCheck('#smsTemplate_row_queryById','没有操作权限')) return;
            title = '编辑';
            winFn.setDomValue(inputEditKeyId, kid);
            layerFn.queryByIdHint(urlQueryById, kid, function(data){
              thisPage.openDialog(title, kid, data);
            });
          }else{
            winFn.setDomValue(inputEditKeyId,'');
            thisPage.openDialog(title);
          }
        },
        openDialog: function(title, kid, map){
          var url = urlAdd;
          if(kid != null && kid.length > 0){
            url = urlEdit;
            if(verifyFn.inputCheck('#smsTemplate_row_edit','没有编辑权限')) return;
          }else{
            if(verifyFn.inputCheck('#smsTemplate_btn_add','没有添加权限')) return;
          }
          layerFn.addOrEdit(title,'#div_sms_template_edit', ['410px','200px'], function(index, layero){
            if(verifyFn.inputCheck('#template_code','模板编号不能为空')) return;
            if(verifyFn.inputCheck('#template_name','模版名称不能为空')) return;
            var params = {
		          template_code : winFn.getDomValue('#template_code'),
		          template_name : winFn.getDomValue('#template_name'),
              phone_variate : winFn.getDomValue('#phone_variate'),
		          kid : winFn.getDomValue(inputEditKeyId)
            };
            layerFn.submit(url, params, function(data){
              thisPage.complete(data, index, true);
            });
          });
          thisPage.resetForm();//清空
          if(map != null){
            $.each(map.data, function(k, v){
              try{
                $('#' + k).val(v);
              }catch(e){}
            });
          }
        },
        rowEdit: function(index){
          var row = thisJquery.fnGetData(index);
          thisPage.edit(row.kid);
        },
        rowDel: function(index){
          if(verifyFn.inputCheck('#smsTemplate_row_delById','没有删除操作权限')) return;
          var row = thisJquery.fnGetData(index);
          layerFn.confirm('删除后无法恢复,确定要删除吗?', function(){
            layerFn.delByIdHint(urlDelById, row.kid, function(data){
              thisPage.complete(data, null, true);
            });
          });
        },
        complete: function(data, index, search){
          try{
            if(index){
              layerFn.closeIndex(index);
            }
            if(search){
              thisPage.search();
            }
            if(data){
              layerFn.handleResult(data.msg, data.code);
            }
          }catch(e){}
        }
      };
      thisPage.init();
    });
  });
</script>